<template>
  <div style="width:100%;height:550px;">
    <transfer-check ref="transferSelect" :url="url" :tab-columns="tabColumns" :origin-target-keys="originTargetKeys" :key-name="keyName" :sync-parent="true" @targetRows="targetRows"/>
  </div>
</template>
<script>
import { getParamValFromUrl, strNotNull } from '@/utils/common.js' 
export default {
  components: {
    TransferCheck: () => import('@/components/tools/TransferCheck'),
  },
  name: 'UserSelect',
  props:{
  },
  data() {
    return {
      currTitle:this.title,
      limit: 200,
      keyName:'username',
      url:'/upms/user/selUserList',
      tabColumns:[
        {
          dataIndex: 'username',
          title: '账号',
        },
        {
          dataIndex: 'realname',
          title: '姓名',
        },
      ],
      originTargetKeys:[]
    };
  },
  mounted() {
    var selUsers = getParamValFromUrl('selUsers');
    if(selUsers!=null && selUsers.length>0){
      this.originTargetKeys = selUsers.split(',');
    }
  },
  methods: {
    targetRows(data){
      if(data.length===0){
        this.$message.warning('请先选择人员');
        return;
      }
      data = JSON.parse(data)
      if(this.limit>0&&data.length>this.limit){
        this.$message.warning('最多只能选择'+this.limit+'名人员');
        return;
      }
      window.parent.postMessage(JSON.stringify(data), '*');
    }
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary{
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected{
  display: none;
}
/deep/ .ant-modal-content{
  border-radius: 15px;
}
/deep/ .ant-modal-title,/deep/ .ant-modal-footer{
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary{
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header{
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%,#1158c9 100%);
}
/deep/ .ant-modal-title{
  color: #fff;
}
</style>